<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回按钮功能
const goBack = () => {
  router.back()
}

// 活动数据
const activityData = ref({
  weeklyGoal: 150,
  weeklyProgress: 120,
  dailyActivity: [
    { day: '周一', minutes: 30, type: '跑步', calories: 300 },
    { day: '周二', minutes: 45, type: '游泳', calories: 400 },
    { day: '周三', minutes: 0, type: '休息', calories: 0 },
    { day: '周四', minutes: 60, type: '骑行', calories: 500 },
    { day: '周五', minutes: 25, type: '健身', calories: 250 },
    { day: '周六', minutes: 0, type: '休息', calories: 0 },
    { day: '周日', minutes: 30, type: '散步', calories: 200 }
  ],
  activeDays: 5,
  totalCalories: 1950,
  recentActivities: [
    { id: 1, date: '2024-01-15', type: '马拉松训练', duration: 90, distance: 10, calories: 600 },
    { id: 2, date: '2024-01-14', type: '瑜伽课', duration: 60, calories: 200 },
    { id: 3, date: '2024-01-13', type: '健身房力量训练', duration: 75, calories: 450 }
  ]
})

// 计算完成百分比
const getProgressPercentage = () => {
  return Math.min((activityData.value.weeklyProgress / activityData.value.weeklyGoal) * 100, 100)
}
</script>

<template>
  <div class="physical-activity-container">
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">
      ← 返回
    </button>

    <!-- 页面标题 -->
    <h1 class="page-title">体育活动</h1>

    <!-- 每周活动进度卡片 -->
    <div class="activity-card">
      <h2 class="card-title">每周活动进度</h2>
      <div class="progress-container">
        <div class="progress-bar">
          <div 
            class="progress-fill" 
            :style="{ width: getProgressPercentage() + '%' }"
          ></div>
        </div>
        <div class="progress-text">
          <span>{{ activityData.weeklyProgress }}/{{ activityData.weeklyGoal }} 分钟</span>
          <span>({{ getProgressPercentage().toFixed(0) }}%)</span>
        </div>
      </div>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">{{ activityData.activeDays }}</div>
          <div class="stat-label">活跃天数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ activityData.totalCalories }}</div>
          <div class="stat-label">总消耗卡路里</div>
        </div>
      </div>
    </div>

    <!-- 每日活动卡片 -->
    <div class="activity-card">
      <h2 class="card-title">本周活动</h2>
      <div class="activity-chart">
        <div class="chart-bars">
          <div 
            v-for="day in activityData.dailyActivity" 
            :key="day.day"
            class="chart-bar-container"
          >
            <div class="chart-bar" :style="{ height: day.minutes * 2 + 'px' }"></div>
            <div class="chart-label">{{ day.day }}</div>
          </div>
        </div>
        <div class="chart-legend">
          <div>0</div>
          <div>30</div>
          <div>60</div>
          <div>90</div>
          <div>120+</div>
        </div>
      </div>
      <div class="daily-activities">
        <div 
          v-for="day in activityData.dailyActivity" 
          :key="day.day"
          class="daily-activity-item"
        >
          <div class="activity-day">{{ day.day }}</div>
          <div class="activity-details">
            <span class="activity-type">{{ day.type }}</span>
            <span class="activity-duration">{{ day.minutes }} 分钟</span>
            <span class="activity-calories">{{ day.calories }} 卡路里</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近活动卡片 -->
    <div class="activity-card">
      <h2 class="card-title">最近活动记录</h2>
      <div class="recent-activities">
        <div 
          v-for="activity in activityData.recentActivities" 
          :key="activity.id"
          class="recent-activity-item"
        >
          <div class="activity-date">{{ activity.date }}</div>
          <div class="activity-info">
            <h3 class="activity-name">{{ activity.type }}</h3>
            <div class="activity-metrics">
              <span>时长: {{ activity.duration }} 分钟</span>
              <span v-if="activity.distance">距离: {{ activity.distance }} km</span>
              <span>消耗: {{ activity.calories }} 卡路里</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 活动建议 -->
    <div class="activity-card">
      <h2 class="card-title">活动建议</h2>
      <div class="activity-tips">
        <ul>
          <li>根据您的目标，建议每天至少进行30分钟中等强度运动</li>
          <li>每周至少进行2天力量训练，锻炼主要肌群</li>
          <li>确保运动前后进行适当的热身和拉伸</li>
          <li>保持水分补充，尤其是在运动过程中</li>
          <li>逐渐增加运动强度和持续时间，避免过度训练</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.physical-activity-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.back-button {
  background: none;
  border: none;
  font-size: 16px;
  color: #007bff;
  cursor: pointer;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.back-button:hover {
  text-decoration: underline;
}

.page-title {
  text-align: center;
  color: #2c3e50;
  margin: 20px 0 30px;
  font-size: 28px;
}

.activity-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.card-title {
  color: #34495e;
  margin-bottom: 20px;
  font-size: 20px;
  border-bottom: 2px solid #e1e8ed;
  padding-bottom: 10px;
}

.progress-container {
  margin-bottom: 20px;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background-color: #28a745;
  transition: width 0.3s ease;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #6c757d;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #28a745;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #6c757d;
}

.activity-chart {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  position: relative;
}

.chart-bars {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 200px;
  padding: 0 20px;
}

.chart-bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 40px;
}

.chart-bar {
  width: 100%;
  background-color: #007bff;
  border-radius: 4px 4px 0 0;
  margin-bottom: 10px;
  transition: height 0.3s ease;
}

.chart-label {
  font-size: 12px;
  color: #6c757d;
}

.chart-legend {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 12px;
  color: #6c757d;
}

.daily-activities {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.daily-activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.activity-day {
  font-weight: bold;
  color: #2c3e50;
}

.activity-details {
  display: flex;
  gap: 20px;
  font-size: 14px;
}

.activity-type {
  color: #34495e;
}

.activity-duration {
  color: #6c757d;
}

.activity-calories {
  color: #e74c3c;
  font-weight: 500;
}

.recent-activities {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.recent-activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.activity-date {
  font-weight: bold;
  color: #007bff;
  min-width: 100px;
}

.activity-info {
  flex: 1;
  margin-left: 20px;
}

.activity-name {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 5px;
}

.activity-metrics {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #6c757d;
}

.activity-tips ul {
  padding-left: 20px;
  line-height: 1.8;
}

.activity-tips li {
  color: #2c3e50;
  margin-bottom: 10px;
}

.activity-tips li:last-child {
  margin-bottom: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .physical-activity-container {
    padding: 15px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .card-title {
    font-size: 18px;
  }
  
  .activity-details {
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
  }
  
  .recent-activity-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .activity-info {
    margin-left: 0;
  }
  
  .activity-metrics {
    flex-wrap: wrap;
    gap: 10px;
  }
}
</style>